<template>
  <div class="bagDetail">
    <div class="header">
      <top-bar style="color:#F9E2B6" :barObj="barObj"></top-bar>
    </div>
    <div class="msg">
      <div class="icon">
        <img src="../../../assets/img/PS.png" alt>
      </div>
      <div class="txt">
        <h3>这是一个别人姓名的红包</h3>
        <h4>恭喜发财， 大吉大利</h4>
      </div>
    </div>
    <div class="listBox">
      <div class="title">1个红包共100PS，1秒被抢光</div>
      <ul>
        <li v-for="(item,index) in list" :key="index">
          <div class="item item1">
            <img :src="item.img" alt>
          </div>
          <div class="item item2">
            <div class="box" style="line-height:0.5rem;">{{item.name}}</div>
            <div class="box">{{item.time}}</div>
          </div>
          <div class="item item3">{{item.ps}}PS</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import topBar from "@/components/topBar";

export default {
  name: "bagDetail",
  data() {
    return {
      barObj: {
        isBack: true,
        backVal: "",
        title: "红包详情",
        isIcon: true
      },
      list: [
        {
          img: require("../../../assets/img/PS.png"),
          name: "这是一个姓名",
          time: "01月04日 18：27",
          ps: "10"
        },
        {
          img: require("../../../assets/img/PS.png"),
          name: "这是一个姓名",
          time: "01月04日 18：27",
          ps: "10"
        }
      ]
    };
  },
  components: {
    topBar
  }
};
</script>
<style lang="stylus" scoped>
.bagDetail {
  .header {
    width: 7.5rem;
    height: 3.16rem;
    background: url('../img/3.png');
    background-size: 100% 100%;
    padding-top: 0.54rem;
    box-sizing: border-box;
  }

  .msg {
    position: relative;
    top: -0.3rem;
    text-align: center;

    .icon {
      width: 1.15rem;
      height: 1.15rem;
      margin: 0 auto;
      border-radius: 0.05rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .txt {
      margin: 10px 0;
      font-size: 14px;

      h4 {
        line-height: 20px;
        font-size: 11px;
      }
    }
  }

  .listBox {
    width: 100%;

    .title {
      margin-left: 0.5rem;
      font-size: 12px;
      color: #7D7D7D;
    }

    ul {
      margin-top: 0.2rem;

      li {
        height: 1rem;
        border-top: 1px solid #D8D8D8;
        border-bottom: 1px solid #D8D8D8;
        padding: 0 0.1rem;
        display: flex;

        .item {
          flex: 1;
        }

        .item2 {
          font-size: 12px;
          display: flex;
          flex-direction: column;
          margin-left: 0.2rem;

          .box {
            flex: 1;
          }
        }

        .item3 {
          width: 1rem;
          flex: 0 1 1rem;
          line-height: 1rem;
          font-size: 12px;
        }

        .item1 {
          width: 0.74rem;
          flex: 0 1 0.74rem;
          height: 0.74rem;
          margin-top: 5px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>


